<section class="content-header">
    <h1>
      义不容辞之事，当无怨无悔
      <small>乐乐的每日一句</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> 文章管理</a></li>
      <li class="active">创建文章</li>
    </ol>
  </section>
<section class="content">
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">2019年创作文章分布趋势折线图</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
   
    <div class="box-body">
        <div id="echartcontainer" style="height: 500px"></div>
    </div>
    
</div>
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">2019年创作文章分布总量柱状图</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
        </div>
    </div>
   
    <div class="box-body">
        <div id="containers" style="height: 500px"></div>
    </div>
    
</div>

<script type="text/javascript">
var dom = document.getElementById("echartcontainer");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
 text: ''
},
tooltip: {
 trigger: 'axis'
},
legend: {
 data:['科技','新闻','百科','互联网','随笔']
},
grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
},
toolbox: {
 feature: {
     saveAsImage: {}
 }
},
xAxis: {
 type: 'category',
 boundaryGap: false,
 data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
},
yAxis: {
 type: 'value'
},
series: [
 {
     name:'科技',
     type:'line',
     stack: '总量',
     data:[12, 13, 10, 13, 9, 23, 21,15,25,16,35,29]
 },
 {
     name:'新闻',
     type:'line',
     stack: '总量',
     data:[22, 18, 19, 23, 29, 33, 31,15,25,16,35,29]
 },
 {
     name:'百科',
     type:'line',
     stack: '总量',
     data:[15, 23, 20, 15, 19, 33, 41,15,25,16,35,29]
 },
 {
     name:'互联网',
     type:'line',
     stack: '总量',
     data:[32, 33, 30, 33, 39, 33, 32,15,25,16,35,29]
 },
 {
     name:'随笔',
     type:'line',
     stack: '总量',
     data:[82, 93, 90, 93, 129, 13, 13,15,25,16,35,29]
 }
]
};
;
if (option && typeof option === "object") {
        myChart.setOption(option, true);
}




var dom = document.getElementById("containers");
var myChart1 = echarts.init(dom);
var app = {};
options = null;
options = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['科技', '新闻', '百科', '互联网', '随笔'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'创作数量',
            type:'bar',
            barWidth: '60%',
            data:[10, 52, 200, 334, 390, 330, 220]
        }
    ]
};
;
if (options && typeof options === "object") {
    myChart1.setOption(options, true);
}
    </script>
</section>